<template>
  <div class="music-player">
      <transition name="screen-mode">
      
    <div class="screen-mode" v-show="screenMode==1">
      <!-- 全屏模式 -->
      <div class="background">
        <!-- <img src="/ablum/2533274792219773.jpg" /> -->
        <!-- <div class="mark"></div> -->
      </div>
      <div class="container">
        <van-nav-bar class="title" :title="currentSong.name" :border="false">
          <i slot="left" @click="setScreenMode(0)" class="iconfont icon-downarrow btn"></i>
        </van-nav-bar>
        <div class="singername">{{currentSong.singername}}</div>

        <div class="cover" @touchstart="changeScrModeStart" @touchend="changeScrModeEnd">
          <transition name="screen">
            <div class="FSM0" v-show="fullscreenMode == 0">
                <div class="changpian mdf">
                <img :class="[playing?'play':'play pause']" :src="currentSong.img" />
                </div>
                <lyric-list
                  :playingTime="playingTime"
                  :duration="duration"
                 :mode="1"></lyric-list>
            </div>
          </transition>
          <transition name="lyric">
            <div class="FSM1" v-show="1 === fullscreenMode">
              <lyric-list
                  :playingTime="playingTime"
                  :duration="duration"
                 :mode="0"></lyric-list>
            </div>          
          </transition>

        </div>

        <div class="player">
          <div class="dot mdf">
            <span :class="{dotactive:0 === fullscreenMode}"></span>
            <span :class="{dotactive:1 === fullscreenMode}"></span>
          </div>
          <div class="jindutiao mdf">
            <div>{{playingTime | ft}}</div>
            <van-slider
              v-model="playingTime"
              class="slider"
              bar-height="4px"
              active-color="#FFD543"
              inactive-color="#2B2B2B"
              :min="0"
              :max="duration"
              @change="changePlay"
            >
              <div slot="button" class="custom-button"></div>
            </van-slider>

            <div>{{duration | ft}}</div>
          </div>
          <div class="mf playcontroll">
            <div class="iconfont"
                @click="changeMode"
                :class="{
                 'icon-xunhuan':  playMode==0,
                 'icon-suijibofang':  playMode==1,
                 'icon-danquxunhuan':  playMode==2,
                }"
            ></div>
            <div class="iconfont icon-previous" @click="onPre"></div>
            <div class="iconfont" @click="playOrStop" :class="[!playing?'icon-play':'icon-pause']"></div>
            <div class="iconfont icon-next" @click="onNext"></div>
            <div class="iconfont icon-heart"></div>
          </div>
        </div>
      </div>
    </div>
      </transition>
      <transition name="mini-mode">

    <div class="mini-mode" v-show="screenMode==0">
      <!-- 小布丁 -->
      <div class="mdf" @click="setScreenMode(1)">
        <img class="logo" 
        :class="[playing?'play':'play pause']"
        :src="currentSong.img" />
        <div class="name">
          <div>{{currentSong.name}}</div>
          <div>{{currentSong.singername}} - {{currentSong.songAlbum}}</div>
        </div>
      </div>
      <div class="control mdf">
        <div class="control1" 
            @click="playOrStop"
        >
          <div
            class="iconfont mcontorlItem0"
            :class="[!playing?'icon-play':'icon-pause']"
          ></div>
          <circle-progress :percent="cpercent" :width="30" />
        </div>
        <div class="iconfont icon-Playlist mcontorlItem1"></div>
      </div>
    </div>
      </transition>

    <audio
      ref="audio"
      :src="currentSong.songlink"
      @canplay="canplay"
      @timeupdate="onPlay"
      @ended="playend"
      @error="errhandle"
    ></audio>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import LyricList from "./lyric-list";
import CircleProgress from "components/circle";

export default {
  data() {
    return {
      playingTime: 0, // 当前播放时间
      duration: 0, // 总时长
      canChangeSong: true,
    };
  },

  components: {
    LyricList,
    CircleProgress
  },

  computed: {
    ...mapState("song", ["fullscreenMode",'currentPlayIndex', "screenMode", "playing",'playMode']),
    ...mapGetters('song',['currentSong']),
    cpercent() {
      return Number.parseInt((this.playingTime / this.duration) * 100);
    }
  },
  mounted() {
  },
  watch:{
      playing(value){
        // console.log(value + "playing")
          if(value){
              this.$refs.audio.play();
            }else{
             this.$refs.audio.pause();   
            }
      },
      currentPlayIndex(v){
        // console.log(v+'change')
      }
  },
  methods: {
    ...mapActions("song", ["setScreenMode"]),
    ...mapMutations("song", ["playOrPause","changePlayMode","changeFullscreenMode",'next','pre']),
    errhandle(e){
      this.canChangeSong = true

    },
    changeScrModeStart(e){
        console.log(e.touches[0])
        this.touchchientX =  e.touches[0].clientX;
    },
    changeScrModeEnd(e){
        let movedistance = e.changedTouches[0].clientX - this.touchchientX;
        if(Math.abs(movedistance) > 50){
            if( movedistance > 0) {
                this.changeFullscreenMode(0)
            }else{
                this.changeFullscreenMode(1)
            }
        }
    },
    changeMode(){
      this.canChangeSong = false;
        if(this.playMode == 0){
            this.changePlayMode(1)
        }else if(this.playMode == 1){
            this.changePlayMode(2)
        }else{
            this.changePlayMode(0)
        }
    },
    changePlay(time) { // 滑块改变时的时间
      this.playOrPause(true);
      this.$refs.audio.currentTime = time;
    },
    canplay(e) {
      this.duration = Number.parseInt(this.$refs.audio.duration);

      if(this.playing) {
        this.playOrPause(true);
        // 音乐播放器播放
        this.$refs.audio.play();
      }else{
        this.playOrPause(false);
        // 音乐播放器暂停
        this.$refs.audio.pause();
      }
      if(!this.canChangeSong){
        // 切歌的时候
        this.playOrPause(true);
        // 音乐播放器播放
        this.$refs.audio.play();
      }

      this.canChangeSong = true

    },
    playOrStop() {
      if (this.playing) {
        this.playOrPause(false);
      } else {
        this.playOrPause(true);
      }
    },
    onPre(e) {

      if(!this.canChangeSong) return
      this.canChangeSong = false
      this.pre()
      this.audioInit()
    },
    audioInit(){
      this.$refs.audio.currentTime = 0;
        this.playingTime = 0;
    },
    onNext(e){

      if(!this.canChangeSong) return
      this.canChangeSong = false
      this.next()
      this.audioInit()
    },
    onPlay(e) {
        // console.log(e)
        // 获取音频组件的当前时间
      this.playingTime = this.$refs.audio.currentTime;
    },
    playend() {
      this.next()
      if(this.playMode == 2){
        this.audioInit()
      }
    }
  },
  filters: {
    ft(time) {
      let m = 0,
        s = 0;
      if (time < 60) {
        s = Number.parseInt(time);
      } else {
        m = Number.parseInt(time / 60);
        s = Number.parseInt(time % 60);
      }
      if (s < 10) {
        s = "0" + s;
      }
      return m + ":" + s;
    }
  }
};



</script>

<style scoped>
.music-player {
  position: fixed;
  bottom: 0;
  z-index: 100;
}

.screen-mode {
  position: absolute;
  top: calc(-100vh);
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-background);
}
.screen-mode > .background,
.screen-mode > .background > img {
  width: 100%;
  height: 100%;
  filter: blur(1px);
}

.screen-mode .cover {
  height: 387px;
  position: relative;
}
.FSM0,.FSM1 {
    height: 100%;
    position: absolute;
    margin-left: 50%;
    transform: translate(-50%)
}

.screen-mode > .background {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.screen-mode > .background .mark {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.screen-mode .title div:nth-of-type(2) {
  color: whitesmoke;
}
.screen-mode .title {
  background: transparent;
}
.screen-mode .title .btn {
  color: var(--color-theme);
}

.screen-mode .singername,
.screen-mode .geci {
  color: whitesmoke;
  text-align: center;
}
.screen-mode .changpian {
  margin: 30px 0;
}

@keyframes play
{
    0%   {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}
 .play {
    animation: play 60s infinite;
}

 .pause {
    animation-play-state: paused;
}
.screen-mode .changpian img {
  width: 280px;
  height: 280px;
  border-radius: 100%;
  border: 10px solid #a8a29a36;
  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) */
}
/* ===================== 动画 ============================= */
.screen-enter,.screen-leave-to{
    transform: translateX(-300px);
    opacity: 0;
}
.screen-enter-active,.screen-leave-active{
    transition: all .2s ease;
}
.lyric-enter-active,.lyric-leave-active{
      transition: all .3s ease;
}
.lyric-enter,.lyric-leave-to{
    transform: translateX(300px);
    opacity: 0;
}

.screen-mode-enter,.screen-mode-leave-to{
    transform: translateY(100vh);
}

.screen-mode-enter-active,.screen-mode-leave-active{
      transition: all .8s ease;
}




/* ===================== 动画 ============================= */

/**.screen-mode */
.screen-mode .dot > span {
  width: 8px;
  height: 8px;
  background: var(--color-text-l);
  border-radius: 8px;
  display: block;
  margin: 0 5px;
}

.screen-mode .dotactive {
  width: 25px !important;
  background: whitesmoke !important;
}

.screen-mode .jindutiao {
  margin-top: 30px;
  justify-content: space-around;
}

.screen-mode .slider {
  width: 210px;
}

.screen-mode .slider .custom-button {
  width: 8px;
  height: 8px;
  background: #ffd543;
  border: 2px solid white;
  border-radius: 100%;
}
.screen-mode .player {
  /* background: peru; */
  height: 206px;
  position: absolute;
  bottom: 0;
  width: 100vw;
  box-sizing: border-box;
  padding: 33px;
}

.screen-mode .playcontroll {
  margin-top: 30px;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

.screen-mode .playcontroll > div {
  font-size: 20px;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-theme);
  border: 2px solid #ffcd32ab;
}

.screen-mode .playcontroll > div:nth-of-type(3) {
  width: 40px;
  height: 40px;
  font-size: 25px;
}

.screen-mode .playcontroll > div:last-child {
  color: var(--color-sub-theme);
  border: 0px;
  font-size: 30px;
}

/* mini模式  */
.mini-mode {
  position: absolute;
  width: 100vw;
  height: 49px;
  top: -49px;
  background: var(--color-background);
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

.mini-mode .logo {
  width: 38px;
  height: 38px;
  border-radius: 100%;
  border: 3px solid #a8a29a36;
  margin-left: 10px;
  margin-right: 20px;
}
.mini-mode .control {
  margin-right: 10px;
}

.mini-mode .control1 {
  width: 30px;
  height: 30px;
  margin-right: 15px;
}

.mini-mode .mcontorlItem0 {
  font-size: 25px;
  color: var(--color-theme);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}
.mini-mode .mcontorlItem1 {
  font-size: 20px;
  color: var(--color-theme);
  margin-right: 5px;
}
.mini-mode .name div:first-child {
  font-size: 14px;
}
.mini-mode .name div:last-child {
  font-size: 12px;
  color: var(--color-text-d);
}
</style>